<template>
    <div class="service-status">
      <h1>服务状态</h1>
      <p v-if="loading">加载中...</p>
      <p v-else-if="error">{{ error }}</p>
      <ul v-else>
        <li v-for="(status, index) in statuses" :key="index">
          <strong>{{ status.name }}:</strong> {{ status.status }}
        </li>
      </ul>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref, onMounted } from 'vue';
  
  const loading = ref(true);
  const error = ref('');
  const statuses = ref<Array<{ name: string; status: string }>>([]);
  
  const fetchServiceStatuses = async () => {
    try {
      // 模拟从服务器获取多个服务的状态
      await new Promise(resolve => setTimeout(resolve, 2000));
      statuses.value = [
        { name: 'API Gateway', status: '运行正常' },
        { name: 'Database Server', status: '运行正常' },
        { name: 'Message Queue', status: '运行正常' },
      ];
    } catch (e) {
      error.value = '获取服务状态失败';
    } finally {
      loading.value = false;
    }
  };
  
  onMounted(() => {
    fetchServiceStatuses();
  });
  </script>
  
  <style scoped>
  .service-status {
    /* 样式 */
  }
  </style>